<template>
  <div class="account-sequrity">
    <div>
      <base-form :formState="formState" @addDomain='addDomain' ref="getbaseForm">
        <template #addDomain="addDomainOptions">
          <div :style="{ marginTop: 0 + 'px' }" class="form-a-radio-group">
            <a-radio-group v-model:value="formState[section_index].children[formItem_index].value">
              <draggable :list="addDomainOptions.list" ghost-class="edit-ghost" handle=".edit" filter=".forbid"
                :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart" @end="onEnd"
                :fallback-class="true" dragClass="dragClass" :fallback-on-body="true" :touch-start-threshold="50"
                :fallback-tolerance="50" :move="onMove">
                <template #item="{ element, index }">
                  <div class="selectOption edit-item edit">

                    <a-radio v-model:value="element.value">
                    </a-radio>
                    <div class="item-input">
                      <a-input v-model:value="element.label" style="width: 232px" :disabled="false" allow-clear />
                      <i class="iconfont icon-drag" v-if="addDomainOptions.list.length > 1" style="margin-left: 8px;"></i>
                      <i class="iconfont iconDelete" v-if="addDomainOptions.list.length > props.limitNum"
                        style="font-size:16px;" @click.stop.prevent="deleteDomain(element.label, index)">&#xe8e2;</i>
                    </div>
                  </div>
                </template>
              </draggable>
            </a-radio-group>

          </div>
        </template>
      </base-form>
    </div>
  </div>
</template>
      

<script lang="ts" setup>
import { ref, reactive, watch, onMounted, nextTick, computed } from "vue";
// import { itemForm } from './formConfig';
import { cloneDeep } from 'lodash'
import baseForm from '@/components/form/draggable/baseForm.vue'
import draggable from "vuedraggable";
import { useColumnModelSettings } from '@/components/draggable/hooks/useColumnModel';
import { dataSourceType } from "@/type";
import { randomWord } from "@/utils/common";
// props
const props = defineProps({
  currentComp: {
    type: Object,
    default: {},
  },
  itemForm: {
    type: Array,
    default: [],
  },
  limitNum: {
    type: Number,
    default: 1
  },

})
//emit
const emit = defineEmits(["changeSelect"])

// data
const formState = ref<any[]>(cloneDeep(props.itemForm));
const getbaseForm = ref();
const section_index = ref(0)
const formItem_index = ref(3)
let list = ref()
const propsCopycurrentComp = ref<any>(props.currentComp);

useColumnModelSettings(formState, computed(() => props.currentComp), propsCopycurrentComp);

//methods

//拖拽开始
const onStart = (e: any) => {
  console.log(e, "开始拖拽");
}
//拖拽结束的事件
const onEnd = (e: any) => {

  // console.log(arr2, 99991)

}
const onMove = (e: any) => {
}

//增加选项
const addDomain = (index1: number, index2: number) => {
  // section_index.value = index1;
  // formItem_index.value = index2;
  console.log(formState.value[index1].children, index2, 'formState.value[index1].children')
  let obj = { label: `选项${formState.value[index1].children[index2 - 1].options.length + 1}`, value: randomWord(false, 5, 5), check: false }
  let item = formState.value[index1].children[index2 - 1];
  if (item) {
    if (item.maxLength && item.maxLength > formState.value[index1].children[index2 - 1].options.length) {
      item.options.push(obj)
    } else {
      item.options.push(obj)
    }
  }

};

//删除选项
const deleteDomain = (label: string, index: number) => {
  console.log(formState.value, 'formState.value');
  formState.value[0].children.forEach((item: dataSourceType, index_child: number) => {
    if (item.param == 'value') {
      if (item.value == formState.value[0].children[index_child].options[index].value) {
        formState.value[0].children[index_child].value = '';
      }
      formState.value[0].children[index_child].options.splice(index, 1);
    }
  })
  nextTick(() => {
    emit("changeSelect");
  })

}

//单选框改变事件





</script>
<style lang="less" scoped>
.account-sequrity {
  height: 100%;
  background-color: #fff;
  width: 100%;
  height: calc(100% - 136px);
  padding-bottom: 56px;

  #accountForm {
    height: 650px;
    overflow: auto;
  }

  .table-bottom_fiexd {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
}


.edit-item {
  margin: 8px 0;

  .item-input {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.dragClass {
  background-color: #EDF7FF;
  height: max-content !important;
  padding: 12px 0;
}

.iconfont {
  color: rgba(0, 0, 0, 0.45)
}

.iconfont:hover {
  color: rgba(0, 0, 0, 0.85)
}

.iconDelete {
  margin-left: 4px;
}

.selectOption {
  display: flex;

  .ant-radio-wrapper {
    margin-right: 12px;
    line-height: 32px;
  }
}
</style>
<style lang="less"></style>
